{% extends "conversation_base.html" %}

{% block content %}
<div class="container mt-4">
    <div class="card shadow">
        <div class="card-header bg-primary text-white">
            <h4 class="mb-0">
                {% for user in conversation.participants.all %}
                    {% if user != request.user %}
                        与 {{ user.username }} 的对话
                    {% endif %}
                {% endfor %}
            </h4>
        </div>

        <div class="card-body message-container" style="max-height: 60vh; overflow-y: auto;">
            {% for message in conversation.messages.all %}
            <div class="message mb-3 {% if message.sender == request.user %}message-sent{% else %}message-received{% endif %}">
                <div class="d-flex align-items-start">
                    <div class="flex-grow-1">
                        <div class="message-header text-muted small mb-1">
                            {{ message.sender.username }} · {{ message.timestamp|date:"Y-m-d H:i" }}
                        </div>
                        <div class="message-content p-3 rounded">
                            {{ message.content|linebreaks }}
                        </div>
                    </div>
                </div>
            </div>
            {% endfor %}
        </div>

        <div class="card-footer">
            <form method="post">
                {% csrf_token %}
                <div class="input-group">
                    {{ form.content }}
                    <button type="submit" class="btn btn-primary">
                        <i class="bi bi-send"></i> 发送
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

<style>
.message-sent .message-content {
    background-color: #e3f2fd;
    border-radius: 15px 15px 0 15px;
}

.message-received .message-content {
    background-color: #f8f9fa;
    border-radius: 15px 15px 15px 0;
}

.message-container::-webkit-scrollbar {
    width: 8px;
}

.message-container::-webkit-scrollbar-track {
    background: #f1f1f1;
}

.message-container::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 4px;
}
</style>
{% endblock %}